<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;

        }
        @font-face {
            font-family: 'iconfont';
            src: url('../../util/icon/iconfont.eot');
            src: url('../../util/icon/iconfont.eot?#iefix') format('embedded-opentype'),
            url('../../util/icon/iconfont.woff2') format('woff2'),
            url('../../util/icon/iconfont.woff') format('woff'),
            url('../../util/icon/iconfont.ttf') format('truetype'),
            url('../../util/icon/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        #xmbox{
            background: #f2f2f2;
            padding: 30px;
            position: relative;
            top: 0;
            left:0;


        }
        .xmcontent{
            float: left;
            width: 99%;
            height: 90%;
            background: white;
            margin-top: 50px;
        }
        ._stdzjb p{
            padding: 20px 10px;
        }
        ._stdzjb1 p{
            padding: 20px 10px;
        }
        ._stdzjb2 p{
            padding: 20px 10px;
        }
        ._stdzjb3 p{
            padding: 20px 10px;
        }
        ._stdzjb  row{
                     margin:10px 0;}
        ._stdzjb1 row{
            margin:10px 0;
        }
        ._stdzjb2 row{
            margin:10px 0;
        }
        ._stdzjb3 row{
            margin:10px 0;
        }
        ._stdfooter{
            height: 100px;
            line-height: 30px;
            text-align: center;
            padding: 0 10px;
            margin: 20px;
        }
        .modal-content{
            width: 900px;
            position: absolute;
            opacity: 0.9;
            top: 0;
            left: -100px;
        }
        #stdModalLabel,#stdModalLabel3,#stdModalLabel2,#stdModalLabel4{
            text-align: center;
            margin: 20px 0 ;
        }
    </style>
    <link rel="stylesheet" href="../../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../../util/jq/jquery-3.4.0.js"></script>
    <script rel="stylesheet" src="../../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
    <div class="container-fluid " id="xmbox">
        <!--内容-->
        <div class="_stdhideorbolock">
            <!--面包屑-->
            <div>
                <ol class="breadcrumb nav-road navbar navbar navbar-default navbar-fixed-top" style="background: white;">
                    <li><a href="#">首页</a></li>
                    <li class="active">学生管理</li>
                </ol>
            </div>

            <!--表格-->
            <div class="xmcontent">
                <!--内容标题-->
                <div class="row _stdh2 ">
                    <h2 class="col-lg-4 col-md-4 col-md-offset-5">学生管理</h2>
                </div>
                <!--年级与班级的筛选，学生信息的查询，学生信息的增加-->
                <div class="row">
                    <span class="col-lg-1 col-md-1 text-center" style="line-height: 40px;margin:  30px 10px 10px 10px">筛选:</span>
                    <!--年级筛选-->
                    <div class="dropdown col-lg-1 col-md-1 " style="line-height:40px;margin:  30px 10px 10px 10px">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"  style="height: 30px;">
                            班级类型
                            <span class="caret"></span>
                        </button>
                        <!--年级筛选-->
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider" >
                            <li class="dropdown-header">班级类型</li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">xxx</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">xxx</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">xxx</a></li>
                        </ul>
                    </div>
                    <!--班级筛选 -->
                    <div class="dropdown col-lg-1 col-md-1 " style="line-height: 40px;margin:  30px 10px 10px 10px">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" style="height: 30px;" >
                            班级级别
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider" >
                            <li class="dropdown-header">班级级别</li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">大班</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">小班</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">中班</a></li>
                        </ul>
                    </div>
                    <!--查询-->
                    <div class="col-lg-7 col-md-6 text-right" style="line-height: 40px;;margin: 30px 10px 10px 10px">
                        <span>输入班级名称/姓名: </span>
                        <label for="name">
                            <input type="text" style="height: 26px; width: 200px;" id="name">
                        </label>
                        <button class="btn" style="height: 30px;">查询</button>
                    </div>
                    <!--学生信息的增加-->
                    <a href="javascript:;" class="add col-lg-1 col-md-1 text-center _stdadd" data-toggle="modal" data-target="#stdModal" style="line-height: 40px;margin: 30px 10px 10px 10px">
                        <button class="btn btn-info _stdbtn1"  style="width:60px;height: 30px;line-height: 10px">新增+</button>
                    </a>
                </div>
                <!--学生信息表单-->
                <div class="center-block row " style="margin: 0 15px" >
                    <table class="table table-striped messages table-hover col-lg-12 col-md-12 text-center _stdtable" >
                        <thead>
                             <tr>
                            <th class=" text-center"><input type="checkbox"></th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">班级名称</th>
                            <th class="text-center">班级类别</th>
                            <th class="text-center">班级级别</th>
                            <th class="text-center">性别</th>
                            <th class="text-center">年龄</th>
                            <th class="text-center">联系电话</th>
                            <th class="text-center">学籍状态</th>
                            <th class="text-center">主班老师</th>
                            <th class="text-center">编辑</th>
                            <th class="text-center">删除</th>
                        </tr>
                        </thead>
                       <tbody class="_stdtbody">

                       </tbody>
                       <tfoot></tfoot>
                    </table>
                </div>
                <!--分页-->
                <div class="row">
                    <nav aria-label="Page navigation" class="col-lg-12 col-md-12 text-right">
                        <ul class="pagination" id="stdpaging">
                            <li class="disabled" id="_stdprevious">
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active stdpaging-1" ><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li class="stdpaging-2"><a href="#">5</a></li>
                            <li id="_stdnext">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!--学员信息录入-->

        <div class="_stdinformation1">
            <!--box-->
            <div class=" modal " id="stdModal" tabindex="-1" role="dialog" aria-labelledby="stdModalLabel">
                <!--蒙版-->
                <div class="modal-dialog" role="document" >
                    <!--弹框内容-->
                    <div class="modal-content _stdcontent">
                        <!--头部-->
                        <div class="modal-header _stdtb">
                            <button type="button" class="close addclose"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h2 class="modal-title _stdtitle" id="stdModalLabel">新学员信息录入</h2>
                        </div>
                        <!--中间内容-->
                        <div class="_stdzjb">
                            <div>
                                <div class="row" style="margin: 10px 0">
                                    <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">姓名：</label>
                                    <input type="text" class="col-lg-2 col-md-2 text-left _name" placeholder="姓名">
                                    <label class="col-lg-2 col-md-2 text-right">身份证号：</label>
                                    <input type="text" class="col-lg-2 col-md-2 text-left _stdId" placeholder="身份证号">
                                </div>
                                <div style="margin: 10px 0"  class="row">
                                    <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">性别：</label>
                                    <input type="text"  class="col-lg-2 col-md-2 text-center _sex" >
                                    <label  class="col-lg-2 col-md-2 text-right">父亲姓名：</label>
                                    <input type="text" class="col-lg-2 col-md-2 text-left _fatherName">
                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">年龄：</label>
                                    <input type="text"  class="col-lg-2 col-md-2 text-left _age">
                                    <label  class="col-lg-2 col-md-2 text-right">母亲姓名：</label>
                                    <input type="text"  class="col-lg-2 col-md-2 text-left _motherName">
                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级名称：</label>
                                    <input type="text" class="col-lg-2 col-md-2 text-left _className">
                                    <label class="col-lg-2 col-md-2 text-right">联系电话：</label>
                                    <input type="text"  class="col-lg-2 col-md-2 text-left _tel">
                                </div>
                                <div style="margin: 10px 0" class="row" >
                                    <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0" >班级类型：</label>
                                    <select class="col-lg-2 col-md-2 text-left _classTpye" style="height: 25px">
                                        <option>xxx</option>
                                        <option>xxx</option>
                                        <option>xxx</option>
                                    </select>
                                    <!--<input type="text"  class="col-lg-2 col-md-2 text-left">-->
                                    <label  class="col-lg-2 col-md-2 text-right">家庭地址：</label>
                                    <input type="text"  class="col-lg-2 col-md-2 text-left _address">

                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0">班级级别：</label>
                                    <select class="col-lg-2 col-md-2 text-left _classGrade" style="height: 25px">
                                        <option>大班</option>
                                        <option>中班</option>
                                        <option>小班</option>
                                    </select>
                                    <label  class="col-lg-2 col-md-2 text-right">入学时间：</label>
                                    <input type="text"   class="col-lg-2 col-md-2 text-left _goSchool">
                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">名族：</label>
                                    <input type="text"  class="col-lg-2 col-md-2 text-left _clan">
                                    <label  class="col-lg-2 col-md-2 text-right">在校表现：</label>
                                    <select class="col-lg-2 col-md-2 text-left _schoolPrivate" style="height: 25px">
                                        <option>优</option>
                                        <option>良</option>
                                        <option>差</option>
                                    </select>
                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;;padding: 0">班主老师：</label>
                                    <select class="col-lg-2 col-md-2 text-right _header" style="height: 25px">
                                        <option>xxx</option>
                                        <option>xxx</option>
                                        <option>xxx</option>
                                    </select>
                                    <!--<input type="text"  class="col-lg-2 col-md-2 text-right">-->
                                    <label  class="col-lg-2 col-md-2 text-right">副班老师：</label>
                                    <select class="col-lg-2 col-md-2 text-right _secondTeacher" style="height: 25px">
                                        <option>xxx</option>
                                        <option>xxx</option>
                                        <option>xxx</option>
                                    </select>
                                    <!--<input type="text" class="col-lg-2 col-md-2 text-left">-->
                                    <!--<input type="text"  class="col-lg-2 col-md-2 text-left">-->
                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0;">学籍状态：</label>
                                    <select class="col-lg-2 col-md-2 text-left _stdState" style="height: 25px">
                                        <option>在读</option>
                                        <option>休学</option>
                                        <option>毕业</option>
                                    </select>
                                    <!--<input type="text"   class="col-lg-2 col-md-2 text-left">-->
                                    <!--<label class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;">表现：</label>-->
                                    <!--<input type="text"   class="col-lg-2 col-md-2 text-left">-->
                                    <label  class="col-lg-2 col-md-2 text-right">健康状态：</label>
                                    <select class="col-lg-2 col-md-2 text-left _healthy" style="height: 25px">
                                        <option>优</option>
                                        <option>良</option>
                                        <option>差</option>
                                    </select>
                                    <label class="col-lg-2 col-md-2 text-right" >保育老师：</label>
                                    <select class="col-lg-2 col-md-2 text-left _lifeTealther" style="height: 25px">
                                        <option>xxx</option>
                                        <option>xxx</option>
                                        <option>xxx</option>
                                    </select>
                                    <!--<input type="text"   class="col-lg-2 col-md-2 text-left">-->
                                </div>
                                <div style="margin: 10px 0" class="row">
                                    <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">备注：</label>
                                    <!--/<input type="text" id="_stdremarks" class="col-lg-9 col-md-9 text-center">-->
                                    <textarea class="col-lg-9 col-md-9 text-center _remarks"></textarea>

                                </div>
                            </div>
                        </div>
                        <!--底部安妮-->
                        <div class="_stdfooter">
                            <button class="_stdok btn">点击保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--查看学员信息-->
        <div class="_stdinformation2">
            <div class="fade modal" id="stdModal4" tabindex="-1" role="dialog" aria-labelledby="stdModalLabel4">
                <!--蒙版-->
                <div class="modal-dialog" role="document" >
                    <!--弹框内容-->
                    <div class="modal-content _stdcontent">
                        <!--头部-->
                        <div class="modal-header _stdtb">
                            <button type="button" class="close addclose"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h2 class="modal-title _stdtitle" id="stdModalLabel4">个人信息</h2>
                        </div>
                        <!--中间内容-->
                        <div class="_stdzjb1">

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--编辑信息-->
        <div class="_stdinformation3">
            <!--box-->
            <div class="fade modal" id="stdModal2" tabindex="-1" role="dialog" aria-labelledby="stdModalLabel2">
                <!--蒙版-->
                <div class="modal-dialog" role="document" >
                    <!--弹框内容-->
                    <div class="modal-content _stdcontent">
                        <!--头部-->
                        <div class="modal-header _stdtb">
                            <button type="button" class="close addclose"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h2 class="modal-title _stdtitle" id="stdModalLabel2">个人信息编辑</h2>
                        </div>
                        <!--中间内容-->
                        <div class="_stdzjb2">

                        </div>
                        <!--底部安妮-->
                        <div class="_stdfooter">
                            <button class="_stdcancel btn" data-dismiss="modal">取消修改</button>
                            <button class="_stdok1 btn">点击保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--学生个人信息删除-->
        <!--<div class="_stdinformation3">-->
            <!--box-->
            <div class="fade modal" id="stdModal3" tabindex="-1" role="dialog" aria-labelledby="stdModalLabel3">
                <!--蒙版-->
                <div class="modal-dialog" role="document" >
                    <!--弹框内容-->
                    <div class="modal-content _stdcontent">
                        <!--头部-->
                        <div class="modal-header _stdtb">
                            <button type="button" class="close addclose"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h2 class="modal-title _stdtitle" id="stdModalLabel3">确认删除吗？</h2>
                        </div>
                        <!--中间内容-->
                        <div class="_stdzjb3" style="border-bottom: 1px solid gainsboro">
                            <div class="row">
                                <h3 class="col-lg-12 col-md-12 text-left " style="height: 80px;margin: 10px 0 10px 30px;">确定要删除吗</h3>
                            </div>
                        </div>
                        <!--底部安妮-->
                        <div class="_stdfooter">
                            <button class="_stdcancel btn" data-dismiss="modal">取消删除</button>
                            <button class="_stdok2 btn">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    let arrx=[{
        name:'小猪猪',
        sex:'女',
        age:'4岁',
        className:'向日葵',
        classTpye:'创新班',
        classGrade:'中班',
        clan:'汉族',
        header:'李小方',
        stdState:'在读',
        remarks:'在校表现优异',
        stdId:513721201504244409,
        fatherName:'小猪爸',
        motherName:'小猪妈',
        tel:15928852687,
        address:'四川省成都市华阳',
        goSchool:'2018年',
        schoolPrivate:'优',
        secondTeacher:'小娟',
        healthy:'优',
        lifeTealther:'张老师',
    },{
        name:'佩琪',
        sex:'女',
        age:'3岁',
        className:'太阳',
        classTpye:'实践班',
        classGrade:'小班',
        clan:'汉族',
        header:'李大大',
        stdState:'在读',
        remarks:'在校表现优异',
        stdId:5137212015042666,
        fatherName:'佩琪爸',
        motherName:'佩琪妈妈',
        tel:15928852687,
        address:'四川省成都市',
        goSchool:'2019年',
        schoolPrivate:'优',
        secondTeacher:'茵茵',
        healthy:'优',
        lifeTealther:'张老师',
   }, {
        name:'红孩儿',
        sex:'女',
        age:'4岁',
        className:'向日葵',
        classTpye:'创新班',
        classGrade:'中班',
        clan:'汉族',
        header:'李小方',
        stdState:'在读',
        remarks:'在校表现优异',
        stdId:513721201504244409,
        fatherName:'小猪爸',
        motherName:'小猪妈',
        tel:15928852687,
        address:'四川省成都市华阳',
        goSchool:'2018年',
        schoolPrivate:'优',
        secondTeacher:'小娟',
        healthy:'优',
        lifeTealther:'张老师',

    },{
        name:'沁沁',
        sex:'女',
        age:'4岁',
        className:'白云',
        classTpye:'创新班',
        classGrade:'大班',
        clan:'汉族',
        header:'龚明君',
        stdState:'在读',
        remarks:'在校表现优异',
        stdId:513721201504244309,
        fatherName:'沁沁爸',
        motherName:'沁沁妈',
        tel:15928852666,
        address:'四川省成都市华阳',
        goSchool:'2018年',
        schoolPrivate:'优',
        secondTeacher:'舒明',
        healthy:'优',
        lifeTealther:'张老师',

    }];
     console.log(arrx);
    $('.dropdown-toggle').dropdown();
    //将数组中的信息添加到页面中；
     $(function () {
         var oTbody=document.querySelector('._stdtbody');
         arrx.forEach(function (v,i) {
             let trtr=document.createElement('tr');
             trtr.innerHTML=`<td ><input type="checkbox"></td>
             <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.name}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.className}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.classTpye}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.classGrade}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.sex}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.age}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.tel}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.stdState}</td>
            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.header}</td>
            <td ><a href="javascript:;" data-toggle="modal" data-target="#stdModal2"><span  class="iconfont _stdwrite" aria-hidden="true">&#xe6e5;</span></a></td>
            <td><a href="javascript:;"><span class="iconfont _stdclr" aria-hidden="true">&#xe638;</span></a></td>`;
             oTbody.appendChild(trtr) ;
         });
         $('._stdpull').click(function () {
             var sa=$(this).parents().index();
             $('._stdzjb1').html(` <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">姓名：</label>
                                <span class="col-lg-2 col-md-2 text-left _name ">${arrx[sa].name}</span>
                                <label class="col-lg-2 col-md-2 text-right">身份证号：</label>
                                <span class="col-lg-2 col-md-2 text-left _stdId">${arrx[sa].stdId}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">性别：</label>
                                <span class="col-lg-2 col-md-2 text-left _sex">${arrx[sa].sex}</span>
                                <label  class="col-lg-2 col-md-2 text-right">父亲姓名：</label>
                                <span class="col-lg-2 col-md-2 text-left _fatherName">${arrx[sa].fatherName}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">年龄：</label>
                                <span class="col-lg-2 col-md-2 text-left _age">${arrx[sa].age}</span>
                                <label  class="col-lg-2 col-md-2 text-right">母亲姓名：</label>
                                <span class="col-lg-2 col-md-2 text-left _motherName">${arrx[sa].motherName}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级名称：</label>
                                <span class="col-lg-2 col-md-2 text-left _className">${arrx[sa].className}</span>
                                <label class="col-lg-2 col-md-2 text-right">联系电话：</label>
                                <span class="col-lg-2 col-md-2 text-left _tel">${arrx[sa].tel}</span>
                            </div>
                            <div style="margin: 10px 0" class="row" >
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级类别：</label>
                                <span class="col-lg-2 col-md-2 text-left _classTpye">${arrx[sa].classTpye}</span>
                                <label  class="col-lg-2 col-md-2 text-right">家庭地址：</label>
                                <span class="col-lg-2 col-md-2 text-left _address">${arrx[sa].address}</span>

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级级别：</label>
                                <span class="col-lg-2 col-md-2 text-left _classGrade">${arrx[sa].classGrade}</span>
                                <label  class="col-lg-2 col-md-2 text-right">入学时间：</label>
                                <span class="col-lg-2 col-md-2 text-left _goSchool">${arrx[sa].goSchool}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">名族：</label>
                                <span class="col-lg-2 col-md-2 text-left _clan">${arrx[sa].clan}</span>
                                <label  class="col-lg-2 col-md-2 text-right">在校表现：</label>
                                <span class="col-lg-2 col-md-2 text-left _schoolPrivate">${arrx[sa].schoolPrivate}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0;">班主老师：</label>
                                <span class="col-lg-2 col-md-2 text-left _header">${arrx[sa].header}</span>
                                <label  class="col-lg-2 col-md-2 text-right">副班老师：</label>
                                <span class="col-lg-2 col-md-2 text-left _secondTeacher">${arrx[sa].secondTeacher}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0">健康状态：</label>
                                <span class="col-lg-2 col-md-2 text-left _healthy">${arrx[sa].healthy}</span>
                                <label  class="col-lg-2 col-md-2 text-right">学籍状态：</label>
                                <span class="col-lg-2 col-md-2 text-left _stdState">${arrx[sa].stdState}</span>
                                <label  class="col-lg-2 col-md-2 text-right">保育老师：</label>
                                <span class="col-lg-2 col-md-2 text-left _lifeTealther ">${arrx[sa].lifeTealther}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">备注：</label>
                                <!--/<input type="text" id="_stdremarks" class="col-lg-9 col-md-9 text-center">-->
                                <textarea class="col-lg-9 col-md-9 text-left _remarks">${arrx[sa].remarks}</textarea>
                            </div>`)
         });
         $('._stdwrite').click(function () {
             // var stt=$('._stdtable tr').eq($($( $(this).parents()).parents()).index());
             var  sb=$(this).parents().parents().parents().index();
             $('._stdzjb2').html(`<div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">姓名：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _name" value="${arrx[sb].name}">
                                <label class="col-lg-2 col-md-2 text-right">身份证号：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _stdId" value="${arrx[sb].stdId}">
                            </div>
                            <div  style="margin: 10px 0" class="row">
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">性别：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _sex"  value="${arrx[sb].sex}">
                                <label  class="col-lg-2 col-md-2 text-right">父亲姓名：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _fatherName"  value="${arrx[sb].fatherName}">
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">年龄：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _age"  value="${arrx[sb].age}">
                                <label  class="col-lg-2 col-md-2 text-right">母亲姓名：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _motherName"  value="${arrx[sb].motherName}">
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级名称：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _className"  value="${arrx[sb].className}">
                                <label class="col-lg-2 col-md-2 text-right">联系电话：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _tel"  value="${arrx[sb].tel}">
                            </div>
                            <div style="margin: 10px 0" class="row" >
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0" >班级类型：</label>

                                <input type="text"  class="col-lg-2 col-md-2 text-left _classTpye" style="height: 25px" value="${arrx[sb].classTpye}">
                                <label  class="col-lg-2 col-md-2 text-right">家庭地址：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _address" value="${arrx[sb].address}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0">班级级别：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _classGrade" style="height: 25px" value="${arrx[sb].classGrade}"  >

                                <label  class="col-lg-2 col-md-2 text-right">入学时间：</label>
                                <input type="text"   class="col-lg-2 col-md-2 text-left _goSchool" value="${arrx[sb].goSchool}">
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">名族：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _clan" value="${arrx[sb].clan}">
                                <label  class="col-lg-2 col-md-2 text-right ">在校表现：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _schoolPrivate" style="height: 25px" value="${arrx[sb].schoolPrivate}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;;padding: 0">班主老师：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _header" style="height: 25px" value="${arrx[sb].header}">

                                <label  class="col-lg-2 col-md-2 text-right">副班老师：</label>
                                 <input type="text" class="col-lg-2 col-md-2 text-left _secondTeacher" value="${arrx[sb].secondTeacher}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0;">学籍状态：</label>
                                  <input type="text"  class="col-lg-2 col-md-2 text-left _stdState" value="${arrx[sb].stdState}">


                                <label  class="col-lg-2 col-md-2 text-right">健康状态：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _healthy"  value="${arrx[sb].healthy}">

                                <label class="col-lg-2 col-md-2 text-right" >保育老师：</label>
                                <input class="col-lg-2 col-md-2 text-left _lifeTealther" value="${arrx[sb].lifeTealther}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">备注：</label>
                                <!--/<input type="text" id="_stdremarks" class="col-lg-9 col-md-9 text-center">-->
                                <textarea class="col-lg-9 col-md-9 text-left _remarks" value="${arrx[sb].remarks}"></textarea>
                            </div>`);

         });
         $('._stdclr').click(function () {
            var  sc=$(this).parent().parent().parent().index;
            alert('你确定删除吗？');
             $(this).parent().parent().parent().remove();
             arrx.splice(sc, 1);
         });
    });
    // 页面转换
    let oLi=$('#stdpaging li');
    let aNext=$('#_stdnext'),aLi1=$('.stdpaging-1'),aLin=$('.stdpaging-2'),aPrevious=$('#_stdprevious');
    oLi.click(function () {
        //循环清除class=actvie和class=disabled
        oLi.removeClass('active');
        oLi.removeClass('disabled');
        //当点击第一页时，向前换页禁止点击
        if($(this).html()===aLi1.html()){
            aPrevious.addClass('disabled');
            $(this).addClass('active');
        }
        //当点击第最后页时，向后换页禁止点击
        else if($(this).html()===aLin.html()){
            aNext.addClass('disabled');
            $(this).addClass('active');
        }
        // 返回本页的前一页
        else if($(this).html()===aPrevious.html()){
            // console.log($(this).prev('#stdpaging li'));
             let arrpag=$(this).prev(oLi);
            arrpag.addClass('active');
        }
        // 本页的下一页
        else if($(this).html()===aNext.html()){
            alert(2);
            $(this).next().addClass('active');
        }
        else{
            $(this).addClass('active');
        }
    });

    // 创建新学员信息
            $('._stdok').click(function () {
                var arr1=[];
                arr1.push({
                    name:$('._name').val(),
                    sex:$('._sex').val(),
                    age:$('._age').val(),
                    className:$('._className').val(),
                    classTpye:$('._classTpye').val(),
                    classGrade:$('._classGrade').val(),
                    clan:$('._clan').val(),
                    header:$('._header').val(),
                    stdState:$('._stdState').val(),
                    remarks:$('._remarks').val(),
                    stdId:$('._stdId').val(),
                    fatherName:$('._fatherName').val(),
                    motherName:$('._motherName').val(),
                    tel:$('._tel').val(),
                    address:$('._address').val(),
                    goSchool:$('._goSchool').val(),
                    schoolPrivate:$('._schoolPrivate').val(),
                    secondTeacher:$('._secondTeacher').val(),
                    healthy:$('._healthy').val(),
                    lifeTealther:$('._lifeTealther').val(),
                });
                let oTbody=document.querySelector('._stdtbody');
                arr1.forEach(function (v,i) {
                    let oTr=document.createElement('tr');
                    oTr.innerHTML=`<td ><input type="checkbox"></td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.name}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.className}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.classTpye}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.classGrade}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.sex}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.stdId}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.tel}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.stdState}</td>
                            <td data-toggle="modal" data-target="#stdModal4" class="_stdpull">${v.header}</td>
                            <td ><a href="javascript:;" data-toggle="modal" data-target="#stdModal2"><span  class="iconfont _stdwrite" aria-hidden="true">&#xe6e5;</span></a></td>
                            <td><a href="javascript:;" ><span class="iconfont _stdclr" aria-hidden="true">&#xe638;</span></a></td>`;
                    oTbody.appendChild(oTr);
                    $('._stdinformation1').css('display','none');
                    $('.modal-backdrop').css('display','none');
                    $('._stdhideorbolock').css('display','block');
                });
                arrx.push(arr1[0]);
                console.log(arrx);
                // $('._stdwrite').click(function () {
                //     // var stt=$('._stdtable tr').eq($($( $(this).parents()).parents()).index());
                //     var sa=$(this).parents().parents().parents().index();
                // });
                // $('._stdpull').click(function () {
                //     var sa=$(this).parents().index();
                //     alert(sa);
                // });
                $('._stdpull').click(function () {
                    var sa=$(this).parents().index();
                    $('._stdzjb1').html(` <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">姓名：</label>
                                <span class="col-lg-2 col-md-2 text-left _name ">${arrx[sa].name}</span>
                                <label class="col-lg-2 col-md-2 text-right">身份证号：</label>
                                <span class="col-lg-2 col-md-2 text-left _stdId">${arrx[sa].stdId}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">性别：</label>
                                <span class="col-lg-2 col-md-2 text-left _sex">${arrx[sa].sex}</span>
                                <label  class="col-lg-2 col-md-2 text-right">父亲姓名：</label>
                                <span class="col-lg-2 col-md-2 text-left _fatherName">${arrx[sa].fatherName}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">年龄：</label>
                                <span class="col-lg-2 col-md-2 text-left _age">${arrx[sa].age}</span>
                                <label  class="col-lg-2 col-md-2 text-right">母亲姓名：</label>
                                <span class="col-lg-2 col-md-2 text-left _motherName">${arrx[sa].motherName}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级名称：</label>
                                <span class="col-lg-2 col-md-2 text-left _className">${arrx[sa].className}</span>
                                <label class="col-lg-2 col-md-2 text-right">联系电话：</label>
                                <span class="col-lg-2 col-md-2 text-left _tel">${arrx[sa].tel}</span>
                            </div>
                            <div style="margin: 10px 0" class="row" >
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级类别：</label>
                                <span class="col-lg-2 col-md-2 text-left _classTpye">${arrx[sa].classTpye}</span>
                                <label  class="col-lg-2 col-md-2 text-right">家庭地址：</label>
                                <span class="col-lg-2 col-md-2 text-left _address">${arrx[sa].address}</span>

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级级别：</label>
                                <span class="col-lg-2 col-md-2 text-left _classGrade">${arrx[sa].classGrade}</span>
                                <label  class="col-lg-2 col-md-2 text-right">入学时间：</label>
                                <span class="col-lg-2 col-md-2 text-left _goSchool">${arrx[sa].goSchool}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">名族：</label>
                                <span class="col-lg-2 col-md-2 text-left _clan">${arrx[sa].clan}</span>
                                <label  class="col-lg-2 col-md-2 text-right">在校表现：</label>
                                <span class="col-lg-2 col-md-2 text-left _schoolPrivate">${arrx[sa].schoolPrivate}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0;">班主老师：</label>
                                <span class="col-lg-2 col-md-2 text-left _header">${arrx[sa].header}</span>
                                <label  class="col-lg-2 col-md-2 text-right">副班老师：</label>
                                <span class="col-lg-2 col-md-2 text-left _secondTeacher">${arrx[sa].secondTeacher}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0">健康状态：</label>
                                <span class="col-lg-2 col-md-2 text-left _healthy">${arrx[sa].healthy}</span>
                                <label  class="col-lg-2 col-md-2 text-right">学籍状态：</label>
                                <span class="col-lg-2 col-md-2 text-left _stdState">${arrx[sa].stdState}</span>
                                <label  class="col-lg-2 col-md-2 text-right">保育老师：</label>
                                <span class="col-lg-2 col-md-2 text-left _lifeTealther ">${arrx[sa].lifeTealther}</span>
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">备注：</label>
                                <!--/<input type="text" id="_stdremarks" class="col-lg-9 col-md-9 text-center">-->
                                <textarea class="col-lg-9 col-md-9 text-left _remarks">${arrx[sa].remarks}</textarea>
                            </div>`)
                });
                $('._stdwrite').click(function () {
                    // var stt=$('._stdtable tr').eq($($( $(this).parents()).parents()).index());
                    var  sb=$(this).parents().parents().parents().index();
                    $('._stdzjb2').html(`<div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">姓名：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _name" value="${arrx[sb].name}">
                                <label class="col-lg-2 col-md-2 text-right">身份证号：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _stdId" value="${arrx[sb].stdId}">
                            </div>
                            <div  style="margin: 10px 0" class="row">
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">性别：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _sex"  value="${arrx[sb].sex}">
                                <label  class="col-lg-2 col-md-2 text-right">父亲姓名：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _fatherName"  value="${arrx[sb].fatherName}">
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">年龄：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _age"  value="${arrx[sb].age}">
                                <label  class="col-lg-2 col-md-2 text-right">母亲姓名：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _motherName"  value="${arrx[sb].motherName}">
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0;">班级名称：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _className"  value="${arrx[sb].className}">
                                <label class="col-lg-2 col-md-2 text-right">联系电话：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _tel"  value="${arrx[sb].tel}">
                            </div>
                            <div style="margin: 10px 0" class="row" >
                                <label class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0" >班级类型：</label>

                                <input type="text"  class="col-lg-2 col-md-2 text-left _classTpye" style="height: 25px" value="${arrx[sb].classTpye}">
                                <label  class="col-lg-2 col-md-2 text-right">家庭地址：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _address" value="${arrx[sb].address}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;padding: 0">班级级别：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _classGrade" style="height: 25px" value="${arrx[sb].classGrade}"  >

                                <label  class="col-lg-2 col-md-2 text-right">入学时间：</label>
                                <input type="text"   class="col-lg-2 col-md-2 text-left _goSchool" value="${arrx[sb].goSchool}">
                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">名族：</label>
                                <input type="text"  class="col-lg-2 col-md-2 text-left _clan" value="${arrx[sb].clan}">
                                <label  class="col-lg-2 col-md-2 text-right ">在校表现：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _schoolPrivate" style="height: 25px" value="${arrx[sb].schoolPrivate}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;;padding: 0">班主老师：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _header" style="height: 25px" value="${arrx[sb].header}">

                                <label  class="col-lg-2 col-md-2 text-right">副班老师：</label>
                                 <input type="text" class="col-lg-2 col-md-2 text-left _secondTeacher" value="${arrx[sb].secondTeacher}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right"  style="margin: 0 0 0 30px;padding: 0;">学籍状态：</label>
                                  <input type="text"  class="col-lg-2 col-md-2 text-left _stdState" value="${arrx[sb].stdState}">


                                <label  class="col-lg-2 col-md-2 text-right">健康状态：</label>
                                <input type="text" class="col-lg-2 col-md-2 text-left _healthy"  value="${arrx[sb].healthy}">

                                <label class="col-lg-2 col-md-2 text-right" >保育老师：</label>
                                <input class="col-lg-2 col-md-2 text-left _lifeTealther" value="${arrx[sb].lifeTealther}">

                            </div>
                            <div style="margin: 10px 0" class="row">
                                <label  class="col-lg-1 col-md-1 text-right" style="margin: 0 0 0 30px;">备注：</label>
                                <!--/<input type="text" id="_stdremarks" class="col-lg-9 col-md-9 text-center">-->
                                <textarea class="col-lg-9 col-md-9 text-left _remarks" value="${arrx[sb].remarks}"></textarea>
                            </div>`);

                });
                $('._stdclr').click(function () {
                    var  sc=$(this).parent().parent().parent().index;

                    alert('你确定删除吗？');
                    arrx.splice(sc, 1);
                    $(this).parent().parent().parent().remove();
                });


    });
      //    $('#stdModal').on('shown.bs.modal', function () {
      //       // $('._stdhideorbolock').css('display','none');
      //       $('#stdInput').focus();
      //       $('._stdinformation1').show().prev().hide();
      //       $('#stdModal').show();
      // });
    //查看学生信息
        $('#stdModal4').on('shown.bs.modal', function () {
            $('._stdhideorbolock').css('display','none');
            $('#stdInput').focus();
         });
    // 修改学生信息
         $('#stdModal2').on('shown.bs.modal', function () {
            $('._stdhideorbolock').css('display','none');
            $('#stdInput').focus();
        });
    //删除学生信息
         $('#stdModal3').on('shown.bs.modal', function () {
        $('._stdhideorbolock').css('display','none');
        $('#stdInput').focus();
    });
   //取消按钮
         $('._stdcancel').click(function () {
             $('.modal-backdrop').css('display','none');
             $('._stdhideorbolock').css('display','block');
        });
    // 关闭按钮
        $('.addclose').click(function () {
            $('.modal-backdrop').css('display','none');
            $('._stdhideorbolock').css('display','block');
        });

</script>
</html>